<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/main.css">
<style type="text/css">
.time-list{height:300px; overflow-y:scroll;}
</style>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/moment.min.js"></script>
<script type="text/javascript">
var currentDate=moment();
var curMonth=moment();
$(function(){
	pageInit();		
	dateInit();
	$(".select-item:eq(0)").click(function(){
		$('#myModal').modal({
		  backdrop: "static"
		})
	})
	$(".city-list li").click(function(){
		var text=$(this).html();
		$(".select-item:eq(0) .text").html(text);
		window.localStorage.setItem("city",text);
		
		$('#myModal').modal('hide');
	})
		
	$(".select-item:eq(1)").click(function(){
		window.localStorage.setItem("placeType","takePlace");
		location.href='StoreNameList.html';	
	})
	
	$(".select-item:eq(2)").click(function(){
		window.localStorage.setItem("placeType","takePlace");
		location.href='StoreNameList.html';	
	})
	
	$(".circle-rectangle .time").click(function(){
		var index=$(".circle-rectangle .time").index($(this));
		$('#timeModal').data('type',index);
		if(index==0)
		{
			$("#timeModal .alert-title").html('取车时间');
		}
		else if(index==1)
		{
			$("#timeModal .alert-title").html('还车时间');
		}
		
		$('#timeModal').modal({
		  backdrop: "static"
		})
	})
	$(".time-list li").click(function(){
		var index=$('#timeModal').data('type');
		var text=$(this).html();
		$(".circle-rectangle .time").get(index).innerHTML=text;
		$('#timeModal').modal('hide');
		if(index==0)
		{
			window.localStorage.setItem("takeTime",text);
		}
		else if(index==1)
		{
			window.localStorage.setItem("returnTime",text);
		}
	})
	
	//选择日期
	$(".circle-rectangle .text").click(function(){		
		var index=$(".circle-rectangle .text").index($(this));
		$('#dateModal').data('type',index);
		$('#dateModal').modal({
		  backdrop: "static"
		})
		
		$(".week-date").delegate("li","click",function(){
			var index=$('#dateModal').data('type');
			var text=$(this).attr("dd");
			$(".circle-rectangle .text").get(index).innerHTML=$(this).attr("dd");
			$('#dateModal').modal('hide');
			if(index==0)
			{
				window.localStorage.setItem("takeDate",text);
			}
			else if(index==1)
			{
				window.localStorage.setItem("returnDate",text);
			}
		})
	})
})

function pageInit()
{
	$.getJSON('http://192.168.4.20:8005/api/BasicDate/GetCityList',function(data){
		var msg='';
		$.each(data, function(i,item){
			msg+=item.CityName+',';
		});
		alert(msg);
	});
	//初始化
	//城市
	var city = window.localStorage.getItem("city");
	if(city)
	{
		$(".select-item:eq(0) .text").html(city);
	}
	
	//取车地址
	var takePlace = window.localStorage.getItem("takePlace");
	if(takePlace)
	{
		$(".select-item:eq(1) .text").html(city);
	}
	
	//还车地址
	var returnPlace = window.localStorage.getItem("returnPlace");
	if(returnPlace)
	{
		$(".select-item:eq(2) .text").html(city);
	}
	
	
	
	var takeDate = window.localStorage.getItem("takeDate");
	if(takeDate)
	{
		$(".circle-rectangle:eq(0) .text").html(takeDate);
	}

	var returnDate = window.localStorage.getItem("returnDate");
	if(returnDate)
	{
		$(".circle-rectangle:eq(2) .text").html(returnDate);
	}

	var takeTime = window.localStorage.getItem("takeTime");
	if(takeTime)
	{
		$(".circle-rectangle:eq(1) .time").html(takeTime);
	}
	
	var returnTime = window.localStorage.getItem("returnTime");
	if(returnTime)
	{
		$(".circle-rectangle:eq(3) .time").html(returnTime);
	}
}

//******************************************************日期弹出框相关的函数*******************************//
//日期选择框初始化
function dateInit()
{
	var arr=getAllDate(curMonth);	
	initDateLi(arr);
		
	$(".date-left").click(function(){
		curMonth.add("M",-1);
		var tmpArray=getAllDate(curMonth);
		initDateLi(tmpArray);
	});
	
	$(".date-right").click(function(){
		curMonth.add("M",1);
		var tmpArray=getAllDate(curMonth);
		initDateLi(tmpArray);
	});
	
	//周六，周日变红色
	$(".week li").each(function(i){
		if(i==0||i==6)
		{
			$(this).addClass("red");
		}
	})
}

//给出moment当前日期
function getAllDate(curdate)
{
	var dayArray=Array();//日期数组
	var firstDay=curdate.date(1);
	var firstWeek=firstDay.day();//一个月第一天星期几	
	
	if(firstWeek==0)firstWeek=7;
	
	//上个月的日期
	for(var i=0;i<firstWeek;i++)
	{		
		var tmpDay=firstDay.clone();
		tmpDay.add('days',i-firstWeek)
		var day=new Day(tmpDay,0);
		dayArray.push(day);
	}
	
	//当月的日期
	var tmpDay1=firstDay.clone();//第一天
	var tmpDay2=firstDay.clone();//最后一天
	tmpDay2.add('M',1).date(0);
	var curDays=tmpDay2.date();//当月总天数
	
	for(var i=0;i<curDays;i++)
	{	
		if(i>0)
		{
			tmpDay1.add('days',1);
		}
		
		var day=null;
		if(tmpDay1.diff(currentDate,'days')==0)
		{
			var day=new Day(tmpDay1,2);
		}
		else
		{
			var day=new Day(tmpDay1,1);
		}
		dayArray.push(day);
	}
	
	//下个月的日期
	for(var i=0;i<42-firstWeek-curDays;i++)
	{		
		tmpDay2.add('days',1)
		var day=new Day(tmpDay2,3);
		dayArray.push(day);
	}

	return dayArray;
}


//日期对象2014-06-30
function Day(curdate,type)
{
	this.week=curdate.days();//星期
	this.daynum=curdate.date();
	this.curdate=curdate.format('YYYY-MM-DD');//当前日期
	this.type=type;//0为上一个月的日期，1为这个月的日期,2为当天日期,3为下一个月的日期
}

function initDateLi(arr)
{
	$("#week-date-li").html('');
	$.each(arr,function(i,n){
		var c=' class="';
		if(n.type==0||n.type==3)
		{
			c+='gray';
		}
		else if(n.type==2)
		{
			c+='cur-bg';
		}
		//如果日期为周六，或者周日,变红色
		if((n.week==0||n.week==6)&&n.type==1)
		{
			c+=' red';
		}
		
		$("#week-date-li").append('<li dd="'+n.curdate+'"'+c+'">'+n.daynum+'</li>');
	});	
	
	var liWidth=parseInt($(window).width()*0.9/7)+1;//边框线
	var boxWidth=liWidth*7+1;
	$(".alert-date-box").css("width",boxWidth);	
	
	
	$(".alert-date-box .alert-title").html(curMonth.format("YYYY-MM"));
	$(".alert-date-box .week li,.alert-date-box .week-date li").css("width",liWidth);
	//鼠标放上去背景变色
	$(".week-date li").hover(function(){
		//不为当上个月下个月并且不为当天时期
		if(!$(this).is('.gray')&&!$(this).is('.cur-bg'))
			$(this).addClass('bg-color');
		},function(){$(this).removeClass('bg-color');});
}
</script>
</head>
<body style="background:url(images/main_bg.png) no-repeat left bottom;background-color:#fcfef5;">
<div class="main-box" style="padding-top:60px;">
<div class="navbar-fixed-top">
	<div class="nav-box">
    <div class="nav-left"><a href="CityTime.html"><img src="images/btn_back.png" height="40"></a></div>
    <div class="nav-center">选择门店</div>
    <div class="nav-right">&nbsp;</div>
    <div class="clear"></div>
</div>
</div>

<div class="circle-select">
    <div class="select-item">
      <div class="img"><img src="images/city.png" width="30" height="30"></div>
      <div class="text">请选择城市</div>
      <div class="clear"></div>
    </div>
</div>

<div class="circle-select">
    <div class="select-item">
      <div class="img"><img src="images/Stores.png" width="30" height="30"></div>
      <div class="text">请选择取车地址</div>
      <div class="clear"></div>
    </div>
    <div class="lineNone"></div>
    <div class="select-item">
      <div class="img"><img src="images/Stores.png" width="30" height="30"></div>
      <div class="text">请选择还车地址</div>
      <div class="clear"></div>
    </div>
</div>

<div class="select-datetime">
	<div class="circle-rectangle">
   	  <div class="img"><img src="images/Calendar.png" width="20"></div>
      <div class="text">出车日期</div>
      <div class="clear"></div>
    </div>
    <div class="circle-rectangle">
    	<div class="time">请选择</div>
   	  <div class="time-img"><img src="images/select-time.png"></div>
      
      <div class="clear"></div>
    </div>
</div>
<div class="clear"></div>
<div class="select-datetime">
	<div class="circle-rectangle">
   	  <div class="img"><img src="images/Calendar.png" width="20"></div>
      <div class="text">还车日期</div>
      <div class="clear"></div>
    </div>
    <div class="circle-rectangle">
    	<div class="time">请选择</div>
   	  <div class="time-img"><img src="images/select-time.png"></div>
      
      <div class="clear"></div>
    </div>
</div>
<div class="clear"></div>
<div class="btn-datetime"><a href="CarTypeList.html"><img src="images/btn-datetime.png" ></a></div>
<p>&nbsp;</p>
<p><br>
</p>
</div>

<div class="modal fade" id="myModal">
<div class="alert-box">
	<div class="alert-title">
    选择城市
    </div>
    <div class="alert-content">
<ul class="city-list">
<c:forEach var="city" items="${citys}">
		<li>${city.cityName}</li>
		</c:forEach>
</ul>

    </div>
</div>
</div>

<div class="modal fade" id="timeModal">
<div class="alert-box">
	<div class="alert-title">
    取车时间
    </div>
    <div class="alert-content">
<ul class="time-list">
  <li>08：00</li>
  <li>08：30</li>
  <li>09：00</li>
  <li>09：30</li>
  <li>10：00</li>
  <li>10：30</li>
  <li>11：00</li>
  <li>11：30</li>
  <li>12：00</li>
  <li>12：30</li>
  <li>13：00</li>
  <li>13：30</li>
  <li>14：00</li>
  <li>14：30</li>
  <li>15：00</li>
  <li>15：30</li>
  <li>16：00</li>
  <li>16：30</li>
  <li>17：00</li>
  <li>17：30</li>
  <li>18：00</li>
  <li>18：30</li>
  <li>19：00</li>
  <li>19：30</li>
  <li>20：00</li>
</ul>

    </div>
</div>
</div>

<div class="modal fade" id="dateModal">
<div class="alert-date-box">
	<div class="alert-head">
    <div class="date-left"></div>
<span class="alert-title"></span>
<div class="date-right"></div>
<div class="clear"></div>
</div>
  <div class="week">
  <ul>
  <li>日</li>
  <li>一</li>
  <li>二</li>
  <li>三</li>
  <li>四</li>
  <li>五</li>
  <li>六</li>
  </ul>
  <div class="clear"></div>
  </div>
  <div class="week-date">
  <ul id="week-date-li">
  <li class="gray">28</li>
  <li>29</li>
  <li>30</li>
  <li>31</li>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  </ul>
  <div class="clear"></div>
  </div>
</div>
</div>
</body>
</html>
